<template>
  <div class="loginBG">
    <!-- <transition name="el-fade-in-linear" mode="in-out"> -->
    <el-card class="box-card">
      <div slot="header">
        <span>登录</span>
      </div>
      <div>
        <el-form ref="loginForm" :model="loginForm" label-width="80px" :rules="loginRules">
          <el-form-item label="用户名" prop="uname">
            <el-input v-model="loginForm.uname"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="loginForm.password" @keyup.enter.native="handleLogin" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="login" style="font-weight: bold" @click.native.prevent="handleLogin"
              :loading="DLload">登录</el-button>
            <el-button class="register" @click="registerVisible = true" style="font-weight: bold">注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <!-- </transition> -->
    <el-dialog title="注册新用户" :visible.sync="registerVisible" width="32%" :before-close="registerClose">
      <span>
        <el-form ref="registerForm" :model="registerForm" label-width="110px" :rules="registerRules">
          <el-form-item label="用户身份证号" prop="identity">
            <el-input v-model="registerForm.identity"></el-input>
          </el-form-item>
          <el-form-item label="用户名" prop="uname">
            <el-input v-model="registerForm.uname"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="registerForm.password"></el-input>
          </el-form-item>
          <el-form-item label="电话号码" prop="tel">
            <el-input v-model="registerForm.tel"></el-input>
          </el-form-item>
          <el-form-item label="所在小区编号" prop="vid">
            <el-input v-model="registerForm.vid"></el-input>
          </el-form-item>
          <el-form-item label="楼号" prop="building_no">
            <el-input v-model="registerForm.building_no"></el-input>
          </el-form-item>
          <el-form-item label="门牌号" prop="house_number">
            <el-input v-model="registerForm.house_number"></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="registerVisible = false" style="font-weight: bold">取 消</el-button>
        <el-button type="primary" style="font-weight: bold" @click="handleRgister">申 请</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      DLload: false,
      loginRules: {
        uname: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入用户密码", trigger: "blur" },
        ],
      },
      registerRules: {
        identity: [
          { required: true, message: "请输入用户身份证号", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入用户密码", trigger: "blur" },
        ],
        uname: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
        ],
        vid: [
          { required: true, message: "请输入用户所在小区号", trigger: "blur" },
        ],
        building_no: [
          { required: true, message: "请输入用户所在楼号", trigger: "blur" },
        ],
        house_number: [{ required: true, message: "请输入用户门牌号", trigger: "blur" }],
        tel: [{ required: true, message: "请输入正确手机号", trigger: "blur" }],
        
      },
      loginForm: {},
      registerForm: {},
      registerVisible: false,
    };
  },
  mounted() {
    sessionStorage.setItem("loginkey", 0);
  },
  methods: {
    onSubmit() {
      // console.log("submit!");
    },
    registerClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => { });
    },
    handleLogin() {
      this.$refs.loginForm.validate((vaild) => {
        if (vaild) {
          this.DLload = true;
          this.$http
            .post(this.baseURL + "/user/login",
              this.loginForm
            )
            .then((res) => {
              // console.log(res);
              if (res.data.flag) {
                this.$message({
                  showClose: true,
                  message: "登录成功。",
                  type: "success",
                });
                sessionStorage.setItem("userinfo", JSON.stringify(res.data.data));
                setTimeout(() => {
                  console.log(res.data.data.type)
                  if (res.data.data.type == 0) {
                    this.$router.push("/adminLayout");
                  } else if (res.data.data.type == 1) {
                    this.$router.push("/layout");
                  }
                  sessionStorage.setItem("loginkey", 1);
                  this.DLload = false;
                }, 300);
              } else {
                this.$message.error(res.data.message);
                this.DLload = false;
              }
            });
        }
      });
    },
    handleRgister() {
      this.$refs.registerForm.validate((vaild) => {
        if (vaild) {
          this.registerForm.num = Number(this.registerForm.num);
          this.registerForm.location = Number(this.registerForm.location);
          this.registerForm.house = Number(this.registerForm.house);
          this.$http
            .post(this.baseURL + "/user/add", this.registerForm)
            .then((res) => {
              if (res.data.flag) {
                this.$message.success("注册成功");
                this.registerVisible = false;
              } else{
                this.$message.error("注册失败");
              }
            });
        }
      });
    },
  },
};
</script>

<style lang="less" scope>
.loginBG {
  height: 100%;
  width: 100%;
  background: url("../assets/loginBG1.png") no-repeat;
  background-size: 100% 100%;
  overflow: hidden;

  .box-card {
    width: 28%;
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.85;
    font-weight: bold;

    .register {
      float: right;
      // margin-right: 50px;
      width: 35%;
      padding: 12px 5%;
    }

    .login {
      width: 55%;
      padding: 12px 5%;
    }

    .el-card__body {
      margin-right: 20px !important;
    }
  }
}

.el-form-item {
  margin-bottom: 22px !important;
}

.el-radio {
  margin-right: 8px !important;
}

.el-dialog__body {
  padding: 30px 20px 10px 20px !important;
}

.el-dialog {
  border-radius: 5px !important;
  font-weight: bold;
  margin-top: 5vh !important;
  opacity: 0.95;
}
</style>